<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <meta name="author" content="liaosimin">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>情感社区</title>
    <link rel="stylesheet" href="{{static_url('css/photo.css')}}"/>
    <link rel="stylesheet" href="{{static_url('css/iconfont.css')}}"/>
    <style>
        .profile2 {
            margin-left: 3.2em;
        }

        .avatar {
            width: 11%;
            float: left;
        }

        .nickname {
            font-size: 1.2em;
        }

        .creat_time {
            top: 1em;
            right: 2em;
        }

        .text {
            font-size: 1.5em;
        }

        .praise {
            text-align: right;
            font-size: 2em;
            color: grey;
        }

        .m {
            margin-left: 0.5em;
        }

        .title_box {
            background-color: #1cb7f0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 99;
        }

        .back {
            color: white;
            font-size: 2.5em;
            line-height: 1.5em;
        }

        .add {
            color: white;
            font-size: 3em;
            right: 1em;
            float: right;
            margin-right: 10px;
            line-height: 1.3em;
        }

        #submit {
            display: none;
        }

        .wrapper textarea {
            height: 5em;
            font-size: 2em;
            margin: 0.5em;
            width: 91%;
            resize: none;
            display: none;
        }

        .wrapper {
            top: 4em;
        }
        .reply{
            list-style-type: none;
            padding-left: 0;
            margin-bottom: 0;
            display: none;
        }
        .reply li{
            border-top: 1px solid #ddd;
            line-height: 2em;
        }
        .reply li a{
            text-decoration:none;
            color: #1cb7f0;
            margin-right: 2px;
        }
        .reply li span:nth-of-type(1) {
            color: grey;
            margin-right: 2px;
        }
        .reply_input{
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: white;
            display: none;
        }
        .reply_input textarea{
            width: 80%;
            resize: none;
            font-size: 1.5em;
            margin: 7px 4px;
            border-radius: 8px;
            border: 1px solid #D8D8D8;
            line-height: 1.5em;
        }
        .reply_input button{
            width: 15%;
            height: 100%;
            position: absolute;
            color: grey;
            background-color: rgba(28, 183, 240, 0);
            font-size: 1.5em;
            border: 0;
        }
        .tap{
            display: inline-block;
            margin-left: 7.8em;
        }
        .tap div{
            float: left;
            width: 4em;
            text-align: center;
            vertical-align: middle;
        }
        .tb_btn{
            font-size: 1.25em;
            padding: 0;
            width: 99%;
            height: 1.7em;
            /*line-height: 2.9rem;*/
            background-color: rgba(55, 55, 55, 0);
            outline: none;
            border: 1px solid white;
            color: white;
            margin: 0;
        }
        .down{
            background-color:white;
            color: #1cb7f0;
        }
    </style>
</head>
<body>
<header class="title_box">
    <a href="javascript:history.back(-1)"><span class="iconfont back">&#xe60c;</span></a>
    <div class="tap">
            <div><button class="tb_btn down" id="tab1">最新</button></div>
            <div><button class="tb_btn" id="tab2">同校</button></div>
            <div><button class="tb_btn" id="tab3">推荐</button></div>
        </div>
    <span class="iconfont add" id="add">&#xe608;</span>
    <span class="iconfont add" id="submit">&#xe610;</span>
</header>

<div class="wrapper">
    <textarea autofocus placeholder="请输入信息"></textarea>
    <div id="list1">
        <div class="item" data-id="1" data-uid="1">
            <div class="item_head">
                <a href="#"><img src="http://img1.2345.com/duoteimg/qqTxImg/2013/04/22/13667706084.jpg" alt="hello"
                                 class="avatar"/></a>

                <div class="profile2">
                    <div>华中科技大学<span class="creat_time">11min</span></div>
                    <div>
                        <span class="nickname">lilei</span>
                        <span><i class="iconfont woman">&#xe60a</i></span>
                    </div>
                </div>
            </div>
            <b class="text">
                hello大家好，我是周杰伦hello大家好，我是周杰伦hello大家好，我是周杰伦hello大家好，我是周杰伦hello大家好，我是周杰伦
            </b>

            <div class="praise">
                <span class="iconfont m" data-action="praise" id="p">&#xe60e;<span class="sum">34</span></span>
                <span class="iconfont m" data-action="reply" id="r">&#xe60f;<span class="sum">34</span></span>
            </div>
            <ul class="reply">
                <li><a href="/profile/1">lsm</a><span>回复liaoshen:</span><span>华中科技大学</span></li>
                <li><a href="/profile/1">lsm</a><span>回复liaoshen:</span>华中科技大学华中科技大学华中科技大学华中科技大学华中科技大学华中科技大学华中科技大学</li>
                <li>hhehe</li>
            </ul>
        </div>
    </div>
    <div id="list2" style="display: none"></div>
    <div id="list3" style="display: none"></div>
</div>
<div class="loading">
    <button type="button" class="btn_loading" id="loading_two">加载更多</button>
</div>
<div class="reply_input">
    <textarea rows="1" placeholder="回复楼主"></textarea>
    <button>发送</button>
</div>
<script src="http://i.gtimg.cn/vipstyle/frozenjs/lib/zepto.min.js?_bid=304"></script>
<script>
    Zepto(function ($) {
        var tab = 1;
        var page = [0,0,0];
        get_data(page[0],1);
        page[0]++;
        $('#add').on('click', function () {
            $('textarea').toggle();
            $(this).toggle();
            $('#submit').toggle();
        });
        $('#submit').on('click', function () {
            $('textarea').toggle();
            $(this).toggle();
            $('#add').toggle();

            var data = $('textarea').val();
            if(data.length<=0)return;
            $.post('', {'action': 'issue', 'data': data}, function (res) {
                if (res.success) {
                    $('textarea').val('');
                }
            });
        });
        $('.btn_loading').on('click', function () {
            get_data(page[tab-1],tab);page[tab-1]++;
        });
        $('.reply_input button').on('click', function () {
            $.post('', {'action': 'reply', 'data': $('.reply_input textarea').val(), 'rid': $('.reply_input textarea').data('rid'), 'tid': $('.reply_input textarea').data('tid')}, function (res) {
                if (res.success) {
                    $('textarea').val('');
                }
            });
        });


        $('.tb_btn').on('click', function () {
            $('#tab'+tab).removeClass('down');
            var id = $(this).attr('id').substr(3);
            if(id!=tab){
                $('#list'+id).toggle();
                $('#list'+tab).toggle();
            }
            tab = id;
            $('#tab'+tab).addClass('down');

            if($('#list'+tab).text().length<=0)
            {
                get_data(page[tab-1],tab);
                page[tab-1]++;
            }

        });
    });

    function get_data(page, tab) {
        $.get('/community?page=' + page + '&action=thread'+'&tab='+tab, function (res) {
            if (res.success) {
                append_items(res.data, tab);
                if(res.data.length<20){
                    $('.btn_loading').text('没有更多了！');
                    $('.btn_loading').attr('disabled', false);
                }
            }
            else {
                alert('error');
            }
        })
    }

    function append_items(data, tab) {
        var len = data.length;
        for (var i = 0; i < len; i++) {
            var avatar_url = 'http://7xit5j.com1.z0.glb.clouddn.com/' + data[i].avatar_url;
            var sex = 'woman">&#xe60a';
            if (data.sex == 1)sex = 'man">&#xe607';
            var item = '<div class="item"  data-id=' + data[i].id + ' data-uid=' + data[i].uid +
                    '><div class="item_head"><a href="' + '/profile/' + data[i].code +
                    '"><img src="' + avatar_url + '" alt="hello" class="avatar"/></a><div class="profile2">' +
                    '<div>' + data[i].ug_name + '<span class="creat_time">' + data[i].time +
                    '</span></div><div><span class="nickname">' + data[i].nickname +
                    '</span><span><i class="iconfont ' + sex +
                    '</i></span></div></div></div><b class="text">' + data[i].intro + '</b><div class="praise">' +
                    '<span class="iconfont m" data-action="praise" id="p">&#xe60e;<span class="sum">' + data[i].praise_sum +
                    '</span></span><span class="iconfont m" data-action="reply" id="r">&#xe60f;<span class="sum">'+
                    data[i].reply_sum +'</span></span></div><ul class="reply"></ul></div>';

            $('#list'+tab).append(item);

            var select = '[data-id="' + data[i].id + '"]';
            var s = $('#list'+tab).children(select);
            s.find('#p').on('click', function () {
                        var action = $(this).data('action');
                        var id = $(this).parent().parent().data('id');
                        var t = $(this);
                        $.post('', {action: action, id: id}, function (res) {
                            t.addClass('color-red');
                            if (res.success) {
                                var sum = t.children('.sum').text();
                                sum = Number(sum) + 1;
                                t.children('.sum').text(sum);
                            }
                        });
                    });
            var on_thread_id = 0;//记录评论被打开的thread_id，如果没有则为0
            s.find('#r').on('click', function(){
                var item = $(this).parent().parent();
                item.children('.reply').toggle();
                if(on_thread_id == 0){
                    on_thread_id = item.data('id');
                    $('.reply_input').toggle();
                    $('.reply_input textarea').attr('data-tid', item.data('id'));
                    $('.reply_input textarea').attr('data-rid', 0);
                    $('.reply_input textarea').attr('placeholder', '回复楼主：');
                    $('.reply_input textarea').val();
                    if(item.children('.reply').text().length>0)return;
                    get_reply(item.data('id'), item);
                }
                else if(on_thread_id == item.data('id')){
                    on_thread_id == 0;
                    $('.reply_input').toggle();
                }
                else{
                    var select = '[data-id="' + on_thread_id + '"]';
                    $(select).children('.reply').toggle();
                    on_thread_id = item.data('id');
                    $('.reply_input textarea').attr('data-tid', item.data('id'));
                    $('.reply_input textarea').attr('data-rid', 0);
                    $('.reply_input textarea').attr('placeholder', '回复楼主：');
                    $('.reply_input textarea').val();
                    if(item.children('.reply').text().length>0)return;
                    get_reply(item.data('id'), item);
                }
            });
        }
    }

    function get_reply(thread_id, s){
        $.get('/community?thread_id=' + thread_id + '&action=reply', function (res) {
            if (res.success) {
                var len = res.data.length;
                var data = res.data;
                for(var i=0;i<len;i++){
                    var item = $('<li><a href="/profile/1">lsm</a><span>回复liaoshen:</span><span>华中科技大学</span></li>');
                    item.attr('data-id', data[i].id);
                    item.children('a').attr('href', '/profile/'+data[i].code);
                    item.children('a').text(data[i].author_name);
                    item.children(':nth-child(2)').text('回复'+data[i].reply_name+':');
                    item.children(':nth-child(3)').text(data[i].text);
                    item.on('click', function(){
                        var t = $(this);
                        var textarea = $('.reply_input textarea');
                        textarea.val();
                        textarea.attr('placeholder', '回复'+t.children('a').text()+':');
                        textarea.attr('data-rid', t.data('id'));
                    });
                    s.children('.reply').append(item);
                }
            }
            else {
                alert('error');
            }
        })
    }
</script>
</body>

</html>